<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>grid</title>
  </head>
  <style media="screen">
    .wrap {
      display: grid;
      grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
      grid-template-rows: auto 10px auto 10px auto;
      justify-content: space-between;
      background-color: rgb(235, 111, 54);
    }
    .item {
      padding: 20px;
      /*margin-right: 10px;*/
      background-color: #eee;
    }
    .a {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .b {
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .c {
      grid-column-start: 5;
      grid-column-end: 6;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .d {
      grid-column-start: 7;
      grid-column-end: 8;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .e {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .f {
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .g {
      grid-column-start: 5;
      grid-column-end: 6;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .h {
      grid-column-start: 7;
      grid-column-end: 8;
      grid-row-start: 3;
      grid-row-end: 4;
    }
    .i {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 5;
      grid-row-end: 6;
    }
    .j {
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 5;
      grid-row-end: 6;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="item a" id="main">1</div>
      <div class="item b">2</div>
      <div class="item c">3</div>
      <div class="item d">4</div>
      <div class="item e">5</div>
      <div class="item f">6</div>
      <div class="item g">7</div>
      <div class="item h">8</div>
      <div class="item i">9</div>
      <div class="item j">10</div>
    </div>
  </body>
  <script>
    //构造函数继承
    console.log('构造函数继承==================');
    function Super(name) {
      this.name = name;
      this.say = function () {
        console.log(this.name);
      }
    };
    Super.prototype.hello = function () {
      console.log('hello:' + this.name);
    };
    function Sub(val) {
      Super.call(this, val);
      this.name = val;
    }
    var s = new Sub('yyyyy');
    s.say();
    console.log(Sub.prototype.constructor) //sub
    console.log(s.constructor) //Sub
    console.log(Sub.constructor) //Function
    // s.hello();//not function 继承不了父类的原型对象
    console.log('原型继承==================');
    //原型继承
    function Super(name) {
      this.name = name;
      this.say = function () {
        console.log(this.name);
      }
    };
    Super.prototype.hello = function () {
      console.log('hello:' + this.name);
    }
    function Son() {};
    Son.prototype = new Super();
    var q = new Son();
    q.say();
    q.hello();
    console.log(q.constructor) //Super
    console.log(Son.constructor) //Function
    console.log('原型继承 extends==================');
    //原型继承 extends
    Function.prototype.extends = function (Super) {
      this.prototype = Super.prototype;
    }
    function Super(name) {
      this.name = name;
      this.say = function () {
        console.log(this.name);
      }
    };
    Super.prototype.hello = function () {
      console.log('hello:' + this.name);
    }
    function Son() {};
    Son.extends(Super);
    var q = new Son();
    q.say();
    q.hello();
    console.log(q.constructor) //Super
    console.log(Son.constructor) //Function
    console.log('组合继承==================');
    //组合继承
    function Super(name) {
      this.name = name;
      this.arr = [1];
      this.say = function () {
        console.log(this.name);
      };
      this.push = function () {
        this.arr.push(2);
        console.log(this.arr);
      };
    };
    Super.prototype.hello = function () {
      console.log('hello:' + this.name);
    }
    function Son(val) {
      Super.call(this, val);
      this.name = val;
    };
    Son.prototype = Object.create(Super.prototype);
    console.log(Son.prototype.constructor);
    // Son.prototype.constructor = Son;//改变指向
    var q = new Son('qqqq');
    var q2 = new Son('eeee');
    q.say();
    q.hello();
    q.push();
    q2.push();
    console.log(q.constructor) //Son
    console.log(Son.constructor) //Function
  </script>
  <script>
  function assignHandler()

{
   var element=document.getElementById("div1");
   var id=element.id;
   element.onclick=function() //element的onclick引用了函数funciton，function通过闭包引用了element，照成循环引用
   {
      alert(id+element+sex);
    }
 /*闭包可以监听外部变量的变化，所以这里把element=null，也就是说外部这个变量相当于不存在了,虽然赋值是在闭包后面，闭包也能够检测到！所以匿名函数不会有外部的DOM对象的引用，不会内存泄漏*/
  var sex="female";
  element=null;
}
    window.onload = function outerFunction() {
      var anotherObj = function innerFunction() {
        console.log(this)
      }
      //通过另外一个闭包来避免JS对象和DOM对象之间的循环引用
      function anotherInnerFunction() {
        var obj = document.getElementById("main");
        //DOM对象引用了anotherObj函数，但是anotherObj函数无法引用DOM对象
        obj.onclick = anotherObj;
      };
      anotherInnerFunction();
    }
    // 方法三、通过添加另一个函数来避免闭包本身，进而阻止内存泄漏
    window.onload = function () {
      var obj = document.getElementById("div1");
      obj.onclick = doesNotLeak;
    }
    //该函数无法访问上面匿名函数中间的obj对象，从而可以阻止内存泄漏！
    function doesNotLeak() {
      alert("我已经阻止内存泄漏了！");
    }
  </script>
</html>
